<template>
	<view class="home_search">
		<!-- 头部导航栏 -->
		<view class="home_nav" :style="{height:(statusBarHeight+45)+'px'}">
			<view class="home_nav_black" @click="previousPage" :style="{marginTop:(statusBarHeight+25)/2+'px'}">
				<image src="../../../static/image/icon/fanhuijian.png"></image>
			</view>
			<view class="home_nav_search" v-if="isSearch" :style="{marginTop:(statusBarHeight+25)/2+'px'}">
				<image src="../../../static/image/images/search.png"></image>
				<input class="uni-input" confirm-type="search" placeholder-style="color:#b0b0b0" placeholder="搜索"
					v-model="category" @confirm="onSearchInputConfirmed" focus />

			</view>
			<view class="home_nav_search" v-else @click="getSearch" :style="{marginTop:(statusBarHeight+25)/2+'px'}">
				<!-- 显示提示 -->
				<view class="suspension">
					<text>{{category}}</text>
					<image src="../../../static/image/icon/quxiao.png"></image>
				</view>
			</view>
		</view>
		<!-- 头部分类查询 -->
		<view class="home_search_nav" :style="{top:(statusBarHeight+45)+'px'}">
			<view class="tabbar_nav" v-if="tab_bar.length!=0">
				<scroll-view scroll-x="true" class="tab-h" v-bind:scroll-into-view="scroll_into"
					v-bind:scroll-with-animation="true">

					<view v-for="(item, index) in tab_bar" class="tab-item"
						v-bind:class="current_tab==item.id ? 'tab-bar-active' : ''" v-bind:key="index"
						v-bind:data-current="index" v-bind:id="item.id" v-on:click="change_tab(item)">{{item.name}}
					</view>
				</scroll-view>
			</view>
			<!-- 筛选 -->
			<view class="screen">
				<view @click="getReason">
					<text>筛选</text>
					<image src="../../../static/image/icon/shaixuan.png"></image>
				</view>

				<!-- 下拉框 -->
				<!-- 遮罩层 -->
				<view class="yinying" :class="[show?'':'tui-mask-show']" v-if="mask" @click="yinying"></view>
				<!-- 下拉的内容 -->
				<view class="Drop_down" :class="{'tui-popup-show':show}">
					<view v-show="isHidden">
						<view class="Drop_down_title">销量</view>
						<view class="Drop_down_title1" :class="{'title1_bg':bgActive}" @click="salesVolume">
							销量最高
						</view>
						<view class="Drop_down_title">价格区间</view>
						<view class="Drop_down_price">
							<view class="Drop_down_price1">
								<input type="text" placeholder="最低价" placeholder-style="color:#888888" />
							</view>
							<view class="line"></view>
							<view class="Drop_down_price1">
								<input type="text" placeholder="最高价" placeholder-style="color:#888888" />
							</view>
						</view>
						<view class="sort">
							<view class="sort1" :class="{'bg_sort1':bgsort==index}" v-for="(item,index) in order"
								:key="index" @click="PriceBottom(item,index)">{{item.name}}</view>

						</view>
						<view class="Drop_down_title">上架时间</view>
						<view class="Launch_time">
							<view class="time1" :class="{'bg_time1':bgtime==index}" v-for="(item,index) in Launchtime"
								:key="index" @click="LaunchTime(item,index)">{{item.name}}</view>
						</view>
						<view class="btn">
							<view class="Reset" @click="Reset">重置</view>
							<view class="determine" @click="Submit">确定</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!--显示不同数据 -->
		<view class="home_bottom" :style="{marginTop:(statusBarHeight+105)+'px'}">
			<!-- 标题 -->
			<!-- <view class="home_bottom_fover">
				<image src="../../../static/image/images/cainixihuan.png"></image>
			</view> -->
			<block v-if="goodsData.length==0">
				<view class="home_bottom_empty">
					<wanl-empty :text="empty"></wanl-empty>
				</view>
			</block>
			<block v-else>
				<view class="home_bottom_shopping">
					<view class="home_bottom_shopping_shopping1" @click="getProductDetails(item)"
						v-for="(item,index) in goodsData" :key="item.id">
						<image class="image" :src="$wanlshop.oss(item.image)" mode="aspectFill"></image>
						<view class="introduce">
							<text>{{item.title}}</text>
						</view>
						<view class="price">
							<view class="price_left" v-if="is_DC==2">
								<text class="money1">￥</text>
								<text class="money2">{{item.DCprice.split('.')[0]}}</text>
								<text class="money1">.{{item.DCprice.split('.')[1]}}</text>
								<text class="money3">￥{{item.market_price}}</text>
							</view>
							<view class="price_left" v-else>
								<text class="money1">￥</text>
								<text class="money2">{{item.price.split('.')[0]}}</text>
								<text class="money1">.{{item.price.split('.')[1]}}</text>
								<text class="money3">￥{{item.market_price}}</text>
							</view>

							<view class="price_right">
								<text>{{item.sales}}购买</text>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>

	</view>
</template>

<script>
	import wanlEmpty from '@/components/wanl-empty/wanl-empty.vue'
	export default {
		data() {
			return {
				// 搜索显示隐藏
				isSearch: false,
				// 上架时间
				Launchtime: [{
						name: '默认',
						text: 'weigh'
					},
					{
						name: '最新上架',
						text: 'createtime'
					},
				],
				// 价格排序
				order: [{
						name: '价格从高到底',
						text: 'desc'
					},
					{
						name: '价格从低到高',
						text: 'asc'
					}
				],
				// 最低价
				dPrice: '',
				// 最高价
				gPrice: '',
				// 销量
				sales: '',
				// 上架时间
				shelves: '',
				// 阴影显示隐藏
				mask: false,
				// 下拉框显示隐藏
				show: false,
				// 销量改变背景
				bgActive: false,
				// 价格从高到底改变背景
				bgsort: -1,
				// 导航栏高度
				statusBarHeight: 0,
				// 上架时间
				bgtime: -1,
				// 弹框里面的数据隐藏
				isHidden: false,
				tab_bar: [],
				// 当前选中tab索引
				current_tab: 0,
				// 当前滚动条距离左边的位置
				scroll_left: 0,
				// 当前滚动条滚动到id位置
				scroll_into: '',
				// 屏幕宽度
				screen_width: 0,
				// 搜索标题名称
				category: '',
				// 搜索的数据
				params: {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				},
				paramsNav: {
					search_type: 1,
					cate_id: '',
					catename: ''
				},
				reload: false, //判断是否上拉
				// 展示的数据
				goodsData: [],
				contentText: {
					contentdown: '',
					contentrefresh: '正在加载..',
					contentnomore: '没有更多数据了'
				},
				drawerParams: {},
				last_page: 0,
				status: 'loading',
				scrollStype: false, //滚动状态
				WanlScroll: 0, //记录页面滚动
				showRight: false,
				likeData: [],
				empty: '没有找到任何宝贝',
				// 判断是否是ui设计师 0 是客户，1是设计室审核，2是设计师
				is_DC: '',
				// 排序
				orders: '',


			};
		},
		// 监听上拉
		onPullDownRefresh() {
			this.params.page = 1;
			this.reload = true;
			this.loadData();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.contentText.contentdown = '上拉显示更多';
				this.params.page = this.params.page + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		// 监听返回
		onUnload() {
			if (this.showRight) {
				this.closeDrawer();
				return true;
			}
		},
		components: {
			wanlEmpty
		},
		methods: {
			// 返回上一页
			previousPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 点击退单原因选择原因
			getReason() {
				this.mask = !this.mask;
				this.show = !this.show;
				setTimeout(() => {
					this.isHidden = !this.isHidden;
				}, 500)
			},
			//通过点击遮罩层阴影隐藏
			yinying() {
				this.mask = false;
				this.show = false;
				setTimeout(() => {
					this.isHidden = !this.isHidden;
				}, 500)
			},
			// 点击搜索导航标题显示隐藏
			getSearch() {
				this.isSearch = !this.isSearch;
				console.log('sfsgsg')
			},
			// 价格从高到底
			PriceBottom(item, index) {
				this.bgsort = index;
				this.orders = item.text;
			},

			// 点击商品跳转到商品详情页
			getProductDetails(item) {
				uni.navigateTo({
					url: '../../productDetails/productDetails?gress=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//点击销量改变销量的颜色
			salesVolume() {
				this.bgActive = !this.bgActive;
				if (this.bgActive == true) {
					this.sales = 'sales';
				} else {
					this.sales = '';
				}

				console.log('params', this.params)
				// console.log('11414')
			},
			// 上架时间默认
			LaunchTime(item, index) {
				this.bgtime = index;
				this.shelves = item.text;
			},

			// 点击重置按钮
			Reset() {
				// 销量
				this.bgActive = false;
				// 上架时间
				this.bgtime = -1;
				// 价格高低
				this.bgsort = -1;
				this.dPrice = "";
				this.gPrice = "";
				this.params.filter.price = '';
				this.params.op.price = '';
				this.params.sort = 'weigh';
				this.params.order = 'asc';
			},
			// 点击提交按钮
			Submit() {
				if (this.dPrice != '' && this.gPrice != '') {
					this.params.filter.price = this.dPrice + ',' + this.gPrice;
					this.params.op.price = "BETWEEN"
				}
				if (this.sales != '') {
					this.params.sort = this.sales;
					this.params.order='desc'
					console.log('sales1', this.sales)

				}
				if (this.shelves == 'weigh') {
					this.params.sort = this.shelves
					this.params.order = 'asc'
					console.log('params1', this.params)
				}
				if (this.shelves == 'createtime') {
					this.params.sort = this.shelves
					this.params.order = 'desc'
					console.log('params2', this.params)
				}
				if (this.bgsort == 0) {
					this.params.sort = 'price';
					this.params.order = this.orders;
					console.log('params122', this.params)
				}
				if (this.bgsort == 1) {
					this.params.sort = 'price';
					this.params.order = this.orders;

				}
				if (this.sales != '' && this.bgsort == 0) {
					this.params.sort = this.sales + ',' + 'price';
					this.params.order = 'desc' + ',' + this.orders;
					console.log('params23', this.params)
				}
				if (this.sales != '' && this.bgsort == 1) {
					this.params.sort = this.sales + ',' + 'price';
					this.params.order = 'desc' + ',' + this.orders;
				}
				if (this.sales != '' && this.shelves == 'createtime') {
					this.params.sort = this.sales + ',' + this.shelves;
					this.params.order = 'desc' + ',' + 'desc';
					console.log('shelves12', this.shelves)
				}
				if (this.sales != '' && this.shelves == 'weigh') {
					this.params.sort = this.sales + ',' + this.shelves;
					this.params.order = 'desc' + ',' + 'asc';
					console.log('shelves123', this.shelves)
				}
				if (this.shelves == 'createtime' && this.bgsort == 0) {
					this.params.sort = this.shelves + ',' + 'price';
					this.params.order = 'desc' + ',' + this.orders;
				}
				if (this.shelves == 'weigh' && this.bgsort == 0) {
					this.params.sort = this.shelves + ',' + 'price';
					this.params.order = 'asc' + ',' + this.orders;
				}
				if (this.shelves == 'createtime' && this.bgsort == 1) {
					this.params.sort = this.shelves + ',' + 'price';
					this.params.order = 'desc' + ',' + this.orders;
				}
				if (this.shelves == 'weigh' && this.bgsort == 1) {
					this.params.sort = this.shelves + ',' + 'price';
					this.params.order = 'asc' + ',' + this.orders;
				}
				if (this.shelves == 'createtime' && this.sales != '' && this.bgsort == 0) {
					this.params.sort = this.shelves + ',' + this.sales + ',' + 'price';
					this.params.order = 'desc' + ',' + 'desc' + ',' + this.orders;
				}
				if (this.shelves == 'weigh' && this.sales != '' && this.bgsort == 0) {
					this.params.sort = this.shelves + ',' + this.sales + ',' + 'price';
					this.params.order = 'asc' + ',' + 'desc' + ',' + this.orders;
				}
				if (this.shelves == 'createtime' && this.sales != '' && this.bgsort == 1) {
					this.params.sort = this.shelves + ',' + this.sales + ',' + 'price';
					this.params.order = 'desc' + ',' + 'desc' + ',' + this.orders;
				}
				if (this.shelves == 'weigh' && this.sales != '' && this.bgsort == 1) {
					this.params.sort = this.shelves + ',' + this.sales + ',' + 'price';
					this.params.order = 'asc' + ',' + 'desc' + ',' + this.orders;
				}
				// 调用加载商品数据
				this.loadData();
				// console.log('params', this.params);
				// 弹框隐藏
				this.yinying();
			},
			//点击tabbar事件
			change_tab(item) {
				// let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.current_tab = item.id;
				this.params.filter.category_id = '';
				this.params.op.category_id = 'in';
				this.paramsNav.cate_id = '';
				if (item.name == "全部") {
					this.params.search = '';
					this.category=''
					this.params.filter.category_id = '';
					this.isSearch=true;
				} else {
					this.params.search = item.name;
					this.category=item.name
					this.isSearch=false;
				}
				this.loadData();
				// 记录当前点击的选项位置
				// this.current_tab=index;
				// 如果点击了第4个以后的,滚动条向右移动屏幕的宽度
				// this.run_tab(index);
				// this.scroll_into=this.tab_bar[index].id;
			},
			// 计算系统屏幕的高度
			GetStatusBarHeight() {
				let that = this;
				uni.getSystemInfo({
					// 获取系统屏幕的高度
					success: function(res) {
						that.statusBarHeight = res.statusBarHeight;
						console.log('状态栏高度123', that.statusBarHeight)
						console.log('状态栏高度', res)
					},
				});
			},
			// 执行整个tab事件
			run_tab(index) {
				// 记录当前滑动的位置
				this.current_tab = index;
				// 如果点击了第4个以后的,滚动条向右移动屏幕的宽度
				this.scroll_into = this.tab_bar[index].id
			},
			// 点击搜索数据
			onSearchInputConfirmed(event) {
				this.params = {
					search: '',
					sort: 'weigh',
					order: 'asc',
					page: 1,
					filter: {},
					op: {}
				}

				let value = event.detail.value;
				this.category = value;
				this.params.search = value;
				this.isSearch = !this.isSearch;
				this.paramsNav.search_type = 3;
				this.paramsNav.catename = value;
				// 调用导航的数据
				this.getNav();
				// 调用展示的数据
				this.loadData();
				console.log('event11', this.params)
				
			},
			//异步加载商品列表
			async loadData() {
				this.$api.get({
					url: '/wanlshop/product/lists',
					data: this.params,
					success: res => {
						this.goodsData = [];
						console.log('res12', res)
						uni.stopPullDownRefresh();
						if (res.data != 0) {
							this.status = 'more';
							this.goodsData = this.reload ? res.data : this.goodsData.concat(res.data);
							// this.drawerParams.category_id = this.goodsData[0].category_id;
							// this.params.filter.category_id = this.goodsData[0].category_id;
							this.params.op.category_id = 'in';
						}
						// console.log('传递的数据', this.params)
						// console.log('goodsData', this.goodsData)
						//数据 追加
						if (res.data.length == 0) {
							this.empty = `没找到与“${this.params.search}"相关的宝贝`;
						};

						this.params.page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
					}
				});
			},
			async getNav() {
				this.$api.get({
					url: '/wanlshop/product/cateSearch',
					data: this.paramsNav,
					success: res => {
						this.tab_bar = res;
						console.log('tab_bar', res)
						var obj = {
							id: 10,
							name: '全部'
						}
						if (res.length != 0) {
							this.tab_bar.push(obj)
						}
						// 根据id从大到小进行排序
						for (var i = 1; i < this.tab_bar.length; i++) {
							for (var k = 0; k < this.tab_bar.length - 1; k++) {
								var max = this.tab_bar[k].id;
								var next = this.tab_bar[k + 1].id;
								if (next < max) {
									var preData = this.tab_bar[k];
									this.tab_bar[k] = this.tab_bar[k + 1];
									this.tab_bar[k + 1] = preData;
								}
							}
						}
						for (var i = 0; i < this.tab_bar.length; i++) {
							if (this.tab_bar[i].name == this.category) {
								this.current_tab = this.tab_bar[i].id;
							}

						}
						console.log('导航的数据', res)
					}
				});
			}
		},
		onLoad(options) {
			//调用系统屏幕尺寸函数
			this.GetStatusBarHeight();
			console.log('options', decodeURIComponent(options))
			var cateSearch = this.$store.state.common.cateSearch;
			console.log('cateSearch', cateSearch)
			// 判断从首页传递过来的分类数据是否有值
			// console.log('categoryas',this.category)
			if (cateSearch.name == "") {
				this.isSearch = true;
			} else {

				this.isSearch = false;
				this.paramsNav.cate_id = cateSearch.id
				this.category = cateSearch.name;
				this.params.search = cateSearch.name;
				this.drawerParams.category_id = cateSearch.id;
				this.params.filter.category_id = cateSearch.id;
				this.params.op.category_id = 'in';
				this.paramsNav.cate_id = cateSearch.id;
				console.log('cateSearch', cateSearch)
				// 调用异步加载函数
				this.loadData();
				// 调用导航的数据
				this.getNav();

			}


			var user = this.$store.state.user;
			this.is_DC = user.is_DC;
			console.log('is_DC', this.is_DC)
			// 首次获取屏幕宽度
			uni.getSystemInfo({
				success: (res) => {
					this.screen_width = res.screenWidth
				}
			});
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.home_search {
		.home_nav {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			width: 100%;
			// height: 150rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 9999;
			display: flex;
			align-items: center;

			.home_nav_black {
				margin-left: 15rpx;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			&_search {
				position: relative;
				margin-left: 15rpx;
				background: #eeeeee;
				width: 400rpx;
				height: 60rpx;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;

				image {
					width: 27rpx;
					height: 27rpx;
					margin-left: 25rpx;

				}

				input {
					line-height: 50rpx;
					height: 60rpx;
					width: 330rpx;
					margin-left: 5rpx;
					font-size: 26rpx;
					border-radius: 50rpx;
					padding-left: 5rpx;
					background-color: #eeeeee;

				}

				.suspension {
					position: absolute;
					top: 7rpx;
					left: 7rpx;
					// width: 200rpx;
					height: 46rpx;
					padding: 0 20rpx;

					border-radius: 50rpx;
					background-color: #797979;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					text {
						font-size: 26rpx;
						color: #FFFFFF;
						// background-color: pink;
						max-width: 300rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}

					image {
						width: 15rpx;
						height: 15rpx;
					}
				}
			}
		}

		&_nav {
			position: fixed;
			top: 0;
			left: 0;
			background-color: #FFFFFF;
			z-index: 99;
			width: 100%;

			.tabbar_nav {
				.tab-h {
					height: 60rpx;
					width: 100%;
					box-sizing: border-box;
					overflow: hidden;
					line-height: 60rpx;
					background: #FFFFFF;
					font-size: 26rpx;
					color: #888888;
					white-space: nowrap;

					.tab-item {
						padding: 0 20rpx;
						display: inline-block;
						// background-color: blue;
					}

					.tab-bar-active {
						font-size: bold;
						color: #000000;
					}
				}
			}

			.screen {
				background-color: #FFFFFF;
				height: 60rpx;
				line-height: 60rpx;
				display: flex;
				align-items: center;
				position: relative;

				text {
					font-size: 26rpx;
					color: #888888;
					margin-left: 20rpx;
				}

				image {
					margin-left: 10rpx;
					width: 20rpx;
					height: 20rpx;
				}

				.yinying {
					background-color: rgba(0, 0, 0, .3);
					position: absolute;
					top: 60rpx;
					left: 0;
					right: 0;
					width: 750rpx;
					height: 1200rpx;
					z-index: 99996;
					transition: all 0.3s ease-in-out;
					opacity: 1;
					// visibility: hidden;
					z-index: 999;
				}

				.tui-mask-show {
					opacity: 0;
					visibility: visible;
				}

				// 下拉框
				.Drop_down {
					position: absolute;
					top: 60rpx;
					left: 0;
					right: 0;
					width: 750rpx;
					padding: 10rpx 20rpx;
					box-sizing: border-box;
					height: 0;
					background-color: #f8f8f8;
					// background-color: red;
					align-items: center;
					justify-content: center;

					transition-property: width, height, background-color;
					transition-duration: 0.5s;
					transition-delay: 0.1s;
					transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
					// display:none;
					z-index: 9999;
					opacity: 0;

					.Drop_down_title {
						// background-color: pink;
						font-size: 27rpx;
						color: #000000;
					}

					.Drop_down_title1 {
						background-color: #FFFFFF;
						width: 150rpx;
						border-radius: 50rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						color: #888888;
						font-size: 24rpx;
						margin-bottom: 5rpx;

					}

					.title1_bg {
						color: #FFFFFF;
						background-color: #e71f19;
					}

					.Drop_down_price {
						// background-color: pink;
						display: flex;
						align-items: center;

						.line {
							width: 40rpx;
							height: 2rpx;
							margin: 0 20rpx;
							background-color: #000000;
						}

						.Drop_down_price1 {
							background-color: #e5e5e5;
							// background-color: red;
							width: 190rpx;
							height: 60rpx;
							line-height: 60rpx;
							border-radius: 50rpx;

							input {
								// background-color: #FFFFFF;
								height: 60rpx;
								line-height: 60rpx;
								font-size: 24rpx;
								border-radius: 50rpx;
								text-align: center;
							}
						}

					}

					.sort {
						// background-color: pink;
						display: flex;
						align-items: center;
						margin: 20rpx 0;

						.sort1 {
							background-color: #FFFFFF;
							font-size: 24rpx;
							width: 190rpx;
							color: #888888;
							height: 60rpx;
							line-height: 60rpx;
							border-radius: 50rpx;
							text-align: center;
							margin-right: 10px;
						}

						.bg_sort1 {
							color: #FFFFFF;
							background-color: #e71f19;
						}
					}

					.Launch_time {
						// background-color: pink;
						display: flex;
						align-items: center;

						.time1 {
							background-color: #FFFFFF;
							font-size: 24rpx;
							width: 160rpx;
							color: #888888;
							height: 60rpx;
							line-height: 60rpx;
							border-radius: 50rpx;
							text-align: center;
							margin-right: 10px;
						}

						.bg_time1 {
							color: #FFFFFF;
							background-color: #e71f19;
						}
					}

					.btn {
						// background-color: pink;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 60rpx;
						margin-bottom: 10rpx;

						view {
							width: 300rpx;
							height: 80rpx;
							line-height: 80rpx;
							font-size: 26rpx;
							text-align: center;
						}

						.Reset {
							background-color: #dcdcdc;
							color: #000000;
							border-radius: 50rpx 0 0 50rpx;
						}

						.determine {
							background-color: #e71f19;
							color: #FFFFFF;
							border-radius: 0 50rpx 50rpx 0;
						}
					}


				}

				.tui-popup-show {
					width: 750rpx;
					height: 640rpx;
					// transform: translate3d(0,100%,0);
					// transform: translateY(0px);
					// transition-duration: 0.3s;
					// visibility: visible;
					background-color: #f8f8f8;
					// display: block;
					opacity: 1;


				}
			}
		}

		.home_bottom {
			background-color: #f8f8f8;
			width: 100%;

			// height: 500rpx;
			// margin-bottom: 30rpx;
			.home_bottom_empty {
				// background-color: pink;
				text-align: center;
				color: #888888;
			}

			.home_bottom_fover {

				text-align: center;

				// background-color: pink;
				image {
					margin: 20rpx 0;
					width: 400rpx;
					height: 30rpx;
				}
			}

			&_shopping {
				width: 720rpx;
				margin: 0 auto 20rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				// background-color: red;


				&_shopping1 {
					width: 350rpx;
					// height: 250px;
					background-color: #FFFFFF;
					border-radius: 8rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					.image {
						width: 350rpx;
						height: 250rpx;
						border-radius: 8rpx 8rpx 0 0;
					}

					.introduce {
						// background-color: red;
						font-size: 26rpx;
						// width: 350rpx;
						margin: 15rpx 10rpx;
						// 多行显示超出部分显示省略号
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						word-break: break-all;
					}

					.price {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: 0 3rpx;
						// background-color: red;
						padding-bottom: 15rpx;

						.price_left {

							.money1 {
								font-size: 24rpx;
								color: #da2625;
							}

							.money2 {
								font-size: 30rpx;
								color: #da2625;
							}

							.money3 {
								font-size: 24rpx;
								color: #c0c0c0;
								text-decoration: line-through;
								margin-left: 3rpx;
							}

						}

						.price_right {
							font-size: 24rpx;
							color: #c0c0c0;
						}
					}
				}
			}
		}
	}
</style>
